<template>
	<view :class="selectVisible || searchVisible ? 'prevent' : ''">
		<view class="search-box">
			<u-search placeholder="搜索" bgColor="#ddd" height="25" v-model="searchVal" shape="square" :showAction="false" @change="searchChange"></u-search>
		</view>
		<u-gap height="60" bgColor="#F3F4F6"></u-gap>
		<view class="content">
			<view class="company" v-for="(item,index) in company" :key="index">
				<view class="collapse-head" hover-class="clickable">{{item.aname}}<text style="color: #aaa;">({{item.PxCount}}/{{item.AllCount}})</text></view>
				<view class="collapse-item" id="custom-collapse" :class="current == index ? 'open':'close'" :style="{height: current == index ? (users.length)*100+'rpx':'0'}">
					<view class="collapse-item__content" hover-class="clickable" v-for="v in users" v-if="current == index" @click.stop="checkChange(v)">
						<view class="radio-box">
							<custom-radio :checked="v.checked"></custom-radio>
						</view>
						<view class="collapse-item__content--avator" v-if="v.avator">
							<image :src="v.avator" mode="" @error="onErrorImg(v)"></image>
						</view>
						<view class="collapse-item__content--avator" v-else>{{formatName(v.pname)}}</view>
						<view class="collapse-item__content--des">
							<view class="collapse-item__content--name">{{v.pname}}</view>
							<view class="collapse-item__content--dept">{{v.dept}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 搜索弹窗 -->
		<view class="" @touchmove.stop.prevent="preventHandler">
			<u-popup :show="searchVisible" :round="10" :customStyle="{top: '100rpx'}" mode="top" duration="0" @close="searchVisible = false" @open="searchVisible = true">
				<view class="" v-if="searchResult.length" style="height: 600rpx;overflow-y: scroll;">
					<view class="select-popup-item" v-for="v in searchResult" style="display: flex;" @click="checkChange(v)">
						<view class="collapse-item__content--avator" v-if="v.avator">
							<image :src="v.avator" mode="" @error="onErrorImg(v)"></image>
						</view>
						<view class="collapse-item__content--avator" v-else>{{formatName(v.pname)}}</view>
						<view class="collapse-item__content--des">
							<view class="collapse-item__content--name">{{v.pname}}</view>
							<view class="collapse-item__content--dept">{{v.dept}}</view>
						</view>
					</view>
				</view>
				<view class="no-search-result" v-else>
					找不到关于“{{searchVal}}"的结果
				</view> 
			</u-popup>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom'
	import _data from '@/common/_data'
	import moment from 'moment'
	import CustomRadio from '@/components/custom/radio/radio.vue'
	
	export default {
		components: {
			CustomRadio,
		},
		data() {
			return {
				searchVal: '',
				company: [],
				current: 0,
				users: [],
				selectVisible: false,
				searchResult: [],
				searchVisible: false,
				static_avator: _data.data('static_url'),
				obscode: _data.localData('obscode'),
			}
		},
		created() {
			this.getTeamWorkOBS()
		},
		methods: {
			/**
			 * 获取水厂数据
			 */
			getTeamWorkOBS() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getTeamWorkOBS',
					success(res) {
						that.company = res.filter(item => {
							return item.OBSCODE == that.obscode
						})
						that.getTeamWorkOBSList()
					}
				})
			},
			/**
			 * 获取水厂下人员数据
			 */
			getTeamWorkOBSList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getTeamWorkOBSList',
					apiparam: {
						obscode: that.obscode
					},
					success(res) {
						res.forEach(item => {
							item.avator = that.static_avator + "/static/photo/user/" + item.pxid + "/70.jpg"
							item.checked = false;
						})
						that.users = res;
					}
				})
			},
			/**
			 * 输入框输入
			 */
			searchChange() {
				let that = this;
				if(this.searchVal) {
					_custom.getDataJava({
						apiname: 'getTeamWorkOBSListByName',
						apiparam: {
							name: this.searchVal
						},
						success(res) {
							that.searchVisible = true;
							that.searchResult = res.filter(item => {
								return item.OBScode == that.obscode
							})
						}
					})
				}
			},
			formatName(v) {
				return v.length > 2 ? v.substring(v.length-2) : v
			},
			/**
			 * 点击人员触发
			 * @param {Object} v
			 */
			checkChange(v) {
				this.users.forEach(item => {
					item.checked = false;
				})
				v.checked = true;
				this.searchVisible = false;
				uni.$emit('selected',v);
				setTimeout(() =>{
					uni.navigateBack()
				},300)
			},
			onErrorImg(v) {
				v.avator = ''
			},
			preventHandler() {
				return
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-box {
		padding: 0 30rpx;
		padding-top: 20rpx;
		background-color: #fff;
		height: 100rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 90rpx;
		/* #endif */
		left: 0;
		width: 100%;
		z-index: 99999;
	}
	
	.content {
		margin-bottom: 100rpx;
	}
	
	.company {
		background-color: #fff;
		font-size: 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.collapse-head {
		line-height: 100rpx;
		padding-left: 30rpx;
	}
	
	.collapse-item {
		background-color: #f8f8f8;
	}
	
	.open {
		overflow: hidden;
		transition: all 1s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}
	
	.close {
		height: 0;
		transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}
	
	.collapse-item__content {
		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #fff;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.collapse-item__content--avator {
		font-size: 27rpx;
		width: 70rpx;
		height: 70rpx;
		background-color: #3C9CFF;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	
	.collapse-item__content--avator > image {
		width: 100%;
		height: 100%;
	}
	
	.collapse-item__content--des {
		font-size: 25rpx;
		color: #aaa;
	}
	
	.collapse-item__content--name {
		font-size: 30rpx;
		color: #000;
		line-height: 40rpx;
	}
	
	.collapse-item__content--dept {
		font-size: 25rpx;
		line-height: 25rpx;
	}
	
	.select-popup-item {
		padding: 10rpx 20rpx;
		margin-bottom: 10rpx;
	}
	
	.delete-btn {
		position: absolute;
		right: 20rpx;
		width: 80rpx;
		height: 30rpx;
	}
	
	.no-search-result {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		background-color: #fff;
	}
	
	.radio-box {
		width: 80rpx;
	}
	
</style>
